* {
  padding: 0;
  margin: 0;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
}
.btn {
  width: 96px;
  height: 64px;
  line-height: 64px;
  text-align: center;
  font-weight: 700;
  cursor: pointer;
  color: #fff;
  border-radius: 10px;
  background-color: red;
}
.box {
  position: relative;
  width: 298px;
  height: 770px;
  display: none;
}
.circle {
  position: relative;
  top: 1px;
  left: -5px;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  background-image: radial-gradient(#f5f5f5, #bebebe);
}
.flagpole {
  width: 10px;
  height: 700px;
  background-image: linear-gradient(to right, #bebebe, #eee, #d2d2d2);
}
.red_flag {
  position: absolute;
  left: 10px;
  bottom: 50px;
  width: 288px;
  height: 192px;
  background-color: red;
}
.star img {
  position: absolute;
}
.star1 img {
  top: 20px;
  left: 20px;
  width: calc(192px * 0.3);
  height: calc(192px * 0.3);
}
.star:not(:first-child) img {
  width: calc(192px * 0.1);
  height: calc(192px * 0.1);
}

.star2 img {
  top: 10px;
  left: 88px;
  transform: rotate(-45deg);
}
.star3 img {
  top: 30px;
  left: 105px;
  transform: rotate(-30deg);
}
.star4 img {
  top: 58px;
  left: 105px;
}
.star5 img {
  top: 77px;
  left: 88px;
  transform: rotate(-45deg);
}
.soldier img {
  position: relative;
  left: 298px;
  bottom: 0;
}
.platform1 {
  position: absolute;
  bottom: 30px;
  left: -35px;
  width: 80px;
  height: 20px;
  border-radius: 2px;
  background-image: linear-gradient(to right, #bebebe, #eee, #d2d2d2);
}
.platform2 {
  position: absolute;
  bottom: 0;
  left: -55px;
  width: 120px;
  height: 30px;
  border-radius: 4px;
  background-image: linear-gradient(to right, #bebebe, #eee, #d2d2d2);
}
